<template>
   <div class="top">
    <div class="header">
        <div class="center">
        <div class="left">
            <el-menu mode="horizontal" default-active="activeIndex" >
                <el-menu-item>
                    <img src="../assets/img/logo1.jpg">
                    <img src="../assets/img/logo2.jpg"  class="right_img" >
                </el-menu-item>
                <el-menu-item index="1" @click="now = !now">产品</el-menu-item>
                <el-menu-item index="2" @click="now1 = !now1">解决方案</el-menu-item>
                <el-menu-item index="3" @click="now2 = !now2">行业</el-menu-item>
                <el-menu-item index="4" @click="now3 = !now3">为您推荐</el-menu-item>
            </el-menu>
        </div>
        <div class="right">
           <ul>
              <li><a href="#">驱动程序</a></li>
              <li><a href="#" class="support">支持</a></li>
              <li>
                <a href="#">
                    <el-popover
                    placement="bottom"
                    width="350"
                    trigger="click">
                    <div class="search_click">
                      <input placeholder="搜索 NVIDIA" />
                      <img src="../assets/img/search1.jpg" />
                    </div>
                        <el-button slot="reference">
                            <img src="../assets/img/search.jpg" />
                        </el-button>
                </el-popover>
                </a>
                </li>
              <li>
                <a href="#">
                    <router-link>
                        <img src="../assets/img/person.jpg"/>
                    </router-link>
                </a>
              </li>
           </ul>
        </div>
         </div>

       <div class="nav_model">
        <div class="nav_center">
         <div   v-show="now" style="display: none;">
             <div class="nav_model_top">
                <span @click="i = 0" :class="{active : i == 0}">硬件</span>
                <span @click="i = 1" :class="{active : i == 1}">软件</span>
             </div>
             <div class="nav_model_item" v-show="i == 0">
                <div class="nav_model_content">
                    <ul>
                        <li>游戏和娱乐</li>
                        <li>
                            <a href="https://www.nvidia.cn/geforce/graphics-cards/" target="_self" class="menu-item-link">GeForce 显卡</a>
                        </li>
                        <li>
                            <a href="https://www.nvidia.cn/geforce/gaming-laptops/" target="_self" class="menu-item-link">游戏笔记本电脑</a>
                        </li>
                        <li>
                            <a href="https://www.nvidia.cn/geforce/products/g-sync-monitors/" target="_self" class="menu-item-link">G-SYNC 显示器</a>
                        </li>
                    </ul>
                     <ul>
                        <li>笔记本电脑和工作站</li>
                        <li>
                           <a href="https://www.nvidia.cn/geforce/gaming-laptops/" target="_self" class="menu-item-link">游戏笔记本电脑</a>
                        </li>
                        <li>
                            <a href="https://www.nvidia.cn/design-visualization/quadro-desktop-gpus/" target="_self" class="menu-item-link">NVIDIA RTX 桌面<span style="white-space: nowrap; display: inline-block;">工作站</span></a>
                        </li>
                        <li>
                           <a href="https://www.nvidia.cn/design-visualization/rtx-professional-laptops/" target="_self" class="menu-item-link">专业笔记本电脑中的 NVIDIA RTX</a>
                        </li>
                        <li>
                            <a href="https://www.nvidia.cn/data-center/dgx-station/" target="_self" class="menu-item-link">DGX Station</a>
                        </li>
                        <li>
                            <a href="https://www.nvidia.cn/deep-learning-ai/solutions/data-science/workstations/" target="_self" class="menu-item-link">NVIDIA RTX 数据科学工作站</a>
                        </li>
                        <li>
                            <a href="https://www.nvidia.cn/studio/laptops-desktops/" target="_self" class="menu-item-link">Studio 设计本</a>
                        </li>
                    </ul>
                     <ul>
                        <li>云和数据中心</li>
                        <li><a href="#">概览</a></li>
                        <li><a href="#">Grace CPU</a></li>
                        <li><a href="#">DGX 系统</a></li>
                        <li><a href="#">NVIDIA OVX</a></li>
                        <li><a href="#">EGX 平台</a></li>
                        <li><a href="#">IGX 平台</a></li>
                        <li><a href="#">HGX 平台</a></li>
                        <li><a href="#">DRIVE Constellation</a></li>
                    </ul>
                     <ul>
                        <li>网络</li>
                        <li><a href="#">概览</a></li>
                        <li><a href="#">DPU</a></li>
                        <li><a href="#">以太网</a></li>
                        <li><a href="#">InfiniBand</a></li>
                        
                    </ul>
                     <ul>
                        <li>GPU</li>
                        <li><a href="#">GeForce</a></li>
                        <li><a href="#">NVIDIA RTX / Quadro</a></li>
                        <li><a href="#">数据中心</a></li>
                        <li><a href="#">Titan RTX</a></li>
                        
                    </ul>
                     <ul>
                        <li>嵌入式系统</li>
                        <li><a href="#">Jetson</a></li>
                        <li><a href="#">DRIVE AGX</a></li>
                        <li><a href="#">Clara AGX</a></li>
                    </ul>
                </div>   
                
             </div>
             <div class="nav_model_item" v-show="i == 1" style="display: none;">
                <div class="nav_model_content">
                    <ul>
                        <li>应用框架</li>
                        <li><a href="#">元宇宙应用 – Omniverse</a></li>
                        <li><a href="#">汽车 - DRIVE</a></li>
                        <li><a href="#">云端 AI 视频流 - Maxine</a></li>
                        <li><a href="#">语音 AI - Riva</a></li>
                        <li><a href="#">数据分析 - RAPIDS</a></li>
                        <li><a href="#">医疗健康 - Clara</a></li>
                        
                    </ul>
                     <ul>
                        <li>应用框架</li>
                        <li><a href="#">高性能计算</a></li>
                        <li><a href="#">智能视频分析 - Metropolis</a></li>
                        <li><a href="#">推荐系统 - Merlin</a></li>
                        <li><a href="#">机器人 - Isaac</a></li>
                        <li><a href="#">电信 - Aerial</a></li>
                    </ul>
                     <ul>
                        <li>应用和工具</li>
                        <li><a href="#">NGC 目录</a></li>
                        <li><a href="#">NVIDIA NGC</a></li>
                        <li><a href="#">3D 工作流 – Omniverse</a></li>
                        <li><a href="#">数据中心</a></li>
                        <li><a href="#">GPU 监控</a></li>
                        <li><a href="#">NVIDIA RTX Experience</a></li>
                        <li><a href="#">NVIDIA RTX 桌面管理器</a></li>
                        <li><a href="#">RTX 加速的创意应用程序</a></li>
                        <li><a href="#">视频会议</a></li>
                        <li><a href="#">NVIDIA 工作台</a></li>

                    </ul>
                     <ul>
                        <li>游戏和创作</li>
                        <li><a href="#">GeForce Experience</a></li>
                        <li><a href="#">NVIDIA Broadcast App</a></li>
                        <li><a href="#">动画 – Machinima</a></li>
                        <li><a href="#">Modding - RTX Remix</a></li>
                        
                    </ul>
                     <ul>
                        <li>基础框架</li>
                        <li><a href="#">AI Enterprise 套件</a></li>
                        <li><a href="#">云原生支持</a></li>
                        <li><a href="#">集群管理</a></li>
                        <li><a href="#">边缘部署管理</a></li>
                        <li><a href="#">推理服务</a></li>
                        <li><a href="#">IO 加速</a></li>
                        <li><a href="#">软件</a></li>
                        <li><a href="#">虚拟GPU</a></li>  
                    </ul>
                     <ul>
                        <li>云服务</li>
                        <li><a href="#">元宇宙 – Omniverse</a></li>
                    </ul>
                </div>   
             </div>
         </div>
          <div class="nav_model_item"  v-show="now1" style="display: none;">
             <div class="nav_model_content">
                    <ul>
                        <li>AI数据科学</li>
                        <li><a href="#">元宇宙应用 – Omniverse</a></li>
                        <li><a href="#">汽车 - DRIVE</a></li>
                        <li><a href="#">云端 AI 视频流 - Maxine</a></li>
                        <li><a href="#">语音 AI - Riva</a></li>
                        <li><a href="#">数据分析 - RAPIDS</a></li>
                        <li><a href="#">医疗健康 - Clara</a></li>
                        
                    </ul>
                     <ul>
                        <li>应用框架</li>
                        <li><a href="#">高性能计算</a></li>
                        <li><a href="#">智能视频分析 - Metropolis</a></li>
                        <li><a href="#">推荐系统 - Merlin</a></li>
                        <li><a href="#">机器人 - Isaac</a></li>
                        <li><a href="#">电信 - Aerial</a></li>
                    </ul>
                     <ul>
                        <li>应用和工具</li>
                        <li><a href="#">NGC 目录</a></li>
                        <li><a href="#">NVIDIA NGC</a></li>
                        <li><a href="#">3D 工作流 – Omniverse</a></li>
                        <li><a href="#">数据中心</a></li>
                        <li><a href="#">GPU 监控</a></li>
                        <li><a href="#">NVIDIA RTX Experience</a></li>
                        <li><a href="#">NVIDIA RTX 桌面管理器</a></li>
                        <li><a href="#">RTX 加速的创意应用程序</a></li>
                        <li><a href="#">视频会议</a></li>
                        <li><a href="#">NVIDIA 工作台</a></li>

                    </ul>
                     <ul>
                        <li>游戏和创作</li>
                        <li><a href="#">GeForce Experience</a></li>
                        <li><a href="#">NVIDIA Broadcast App</a></li>
                        <li><a href="#">动画 – Machinima</a></li>
                        <li><a href="#">Modding - RTX Remix</a></li>
                        
                    </ul>
                     <ul>
                        <li>基础框架</li>
                        <li><a href="#">AI Enterprise 套件</a></li>
                        <li><a href="#">云原生支持</a></li>
                        <li><a href="#">集群管理</a></li>
                        <li><a href="#">边缘部署管理</a></li>
                        <li><a href="#">推理服务</a></li>
                        <li><a href="#">IO 加速</a></li>
                        <li><a href="#">软件</a></li>
                        <li><a href="#">虚拟GPU</a></li>  
                    </ul>
                     <ul>
                        <li>云服务</li>
                        <li><a href="#">元宇宙 – Omniverse</a></li>
                    </ul>
                </div>  
         </div>
          <div class="nav_model_item" v-show="now2"   style="display: none;">
             <div class="nav_model_content">
                    <ul>
                        <li>行业</li>
                        <li><a href="#">元宇宙应用 – Omniverse</a></li>
                        <li><a href="#">汽车 - DRIVE</a></li>
                        <li><a href="#">云端 AI 视频流 - Maxine</a></li>
                        
                    </ul>
                     <ul>
                        <li>应用框架</li>
                        <li><a href="#">高性能计算</a></li>
                        <li><a href="#">智能视频分析 - Metropolis</a></li>
                        <li><a href="#">推荐系统 - Merlin</a></li>
                       
                    </ul>
                     <ul>
                        <li>应用和工具</li>
                        <li><a href="#">NGC 目录</a></li>
                        <li><a href="#">NVIDIA NGC</a></li>
                        <li><a href="#">3D 工作流 – Omniverse</a></li>
                        <li><a href="#">数据中心</a></li>
                        <li><a href="#">GPU 监控</a></li>

                    </ul>
                     <ul>
                        <li>游戏和创作</li>
                        <li><a href="#">GeForce Experience</a></li>
                        <li><a href="#">NVIDIA Broadcast App</a></li>
                        <li><a href="#">动画 – Machinima</a></li>
                        <li><a href="#">Modding - RTX Remix</a></li>
                        
                    </ul>
                     <ul>
                        <li>基础框架</li>
                        <li><a href="#">AI Enterprise 套件</a></li>
                        <li><a href="#">云原生支持</a></li>
                        <li><a href="#">集群管理</a></li>
                        <li><a href="#">边缘部署管理</a></li>  
                    </ul>
                     <ul>
                        <li>云服务</li>
                        <li><a href="#">元宇宙 – Omniverse</a></li>
                    </ul>
                </div>  
         </div>
          <div class="nav_model_item" v-show="now3"  style="display: none;">
             <div class="nav_model_commend">
                    <ul>
                         <li><a href="#">创意产业/设计师</a></li>
                         <li><a href="#">数据科学家</a></li>
                         <li><a href="#">开发人员</a></li>
                         <li><a href="#">玩家</a></li>
                         <li><a href="#">IT 专业人士</a></li>
                         <li><a href="#">研究人员</a></li>
                         <li><a href="#">机器人专家</a></li>
                         <li><a href="#">初创公司</a></li>
                         <li><a href="#">技术培训</a></li>
                         <li><a href="#">社区研讨会</a></li>
                    </ul>
                    
                </div>  
         </div>
          
         </div>
       </div>


    </div>
   </div>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex: 1,
                now: false,
                now1:false,
                now2:false,
                now3:false,
                i: 0,
            }
        },
    }
</script>

<style lang="scss" scoped>


</style>
<style scoped src= '../assets/css/header.css'>

</style>